<template>
  <div id="register-account-container">
    <div class="register-header">
      <img src="../assets/img/login-logo.png" alt="">
      <span>
        注册账号
      </span>
    </div>
    <div class="register-account-content">

      <div class="register-account-form">
        <div class="register-account-form-item">
          <input type="text" placeholder="请输入用户名" @focus="registerAccountForm.account=''" :style="{color: registerAccountForm.account === '请输入用户名' ? 'gray' : 'black' }" v-model="registerAccountForm.account">
        </div>
        <div class="register-account-form-item">
          <input type="text" placeholder="请输入昵称" @focus="registerAccountForm.username=''" :style="{color: registerAccountForm.username === '请输入昵称' ? 'gray' : 'black' }" v-model="registerAccountForm.username">
        </div>
        <div class="register-account-form-item">
          <input type="password" placeholder="请输入密码" @focus="registerAccountForm.password=''" v-model="registerAccountForm.password">
        </div>
        <div class="register-account-form-item">
          <input type="password" placeholder="请再次输入密码" @focus="registerAccountForm.passwordAgain=''" v-model="registerAccountForm.passwordAgain">
        </div>
        <div class="register-account-form-item registry-captcha">
          <input class="captcha-input" type="text" @focus="registerAccountForm.captcha=''" placeholder="请输入验证码" :style="{color: registerAccountForm.captcha === '请输入验证码' ? 'gray' : 'black' }" v-model="registerAccountForm.captcha">'
          <img ref="captcha" src="http://localhost:8090/user/captcha" alt="" class="captcha"
               @click="getCaptcha()">
        </div>
        <div class="register-account-form-item">
          <button class="register-account-form-item-inputBtn" @click="register()">注册</button>
        </div>
        <span @click="$router.push('/')">已有账号，返回登录</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RegisterAccount',
    data(){
      return {
        registerAccountForm: {
          account: '请输入用户名',
          username: '请输入昵称',
          password: '请输入密码',
          passwordAgain: '请再次输入密码',
          captcha: '请输入验证码'
        }
      }
    },
    methods:{
      register(){
        if(this.registerAccountForm.account === '请输入用户名' || this.registerAccountForm.username === '请输入昵称' || this.registerAccountForm.password === '请输入密码' || this.registerAccountForm.captcha === '请输入验证码'){
          return this.$messageHelper.messageWarning('请输入完整信息');
        }
        if(this.registerAccountForm.account === '' || this.registerAccountForm.username === '' || this.registerAccountForm.password === '' || this.registerAccountForm.captcha === ''){
          return this.$messageHelper.messageWarning('请输入完整信息');
        }
        if(this.registerAccountForm.password !== this.registerAccountForm.passwordAgain){
          return this.$messageHelper.messageWarning('两次密码不一致');
        }
        this.$request.post('/user/register', this.registerAccountForm).then(res => {
          if(res.data.code === 200){
            this.$router.push({name: 'login'});
          }else{
            this.$messageHelper.messageWarning(res.data.msg);
          }
        })
      },
      getCaptcha(){
        this.$refs.captcha.src = 'http://localhost:8090/user/captcha?time=' + new Date().getTime();
      }
    }
  }
</script>

<style lang="less">
@headerHeight: 140px;
  #register-account-container{
    padding-bottom:20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .register-header{
      padding: 10px 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: @headerHeight;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px #ccc;
      margin-bottom: 20px;

      img{
        height: calc(@headerHeight - 40px);
        border-radius: 8px;
      }

      span{
        font-size: 36px;
        font-weight: bolder;
        margin-left: 20px;
      }
    }

    .register-account-content{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      min-width: 600px;
      height:calc(100% - @headerHeight);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 0 10px #ccc;

      .register-account-form{
        width: 600px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .registry-captcha{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 80%;
          height: 50px;
          margin-bottom: 20px;
          .captcha{
            width: 120px;
            height: 100%;
            cursor: pointer;
          }
        }

        .register-account-form-item{
          width: 80%;
          height: 50px;
          margin-bottom: 20px;

          input{
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding-left: 10px;
            font-size: 16px;
            outline: none;
          }

          .register-account-form-item-inputBtn{
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 8px;
            background: #409eff;
            color: #fff;
            font-size: 16px;
            outline: none;
            cursor: pointer;
          }
        }
        span{
          width: 80%;
          text-align: left;
          color: #409eff;
          &:hover{
            color: red;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
